import { createRouter, createWebHistory } from 'vue-router'
import ConnectionForm from '../components/ConnectionForm.vue'
import MainLayout from '../layouts/MainLayout.vue'
import CallsPage from '../components/CallsPage.vue'
import ContactsPage from '../components/ContactsPage.vue'
import NewCallPage from '../components/NewCallPage.vue'
import NewContactPage from '../components/NewContactPage.vue'

const routes = [
  {
    path: '/',
    redirect: '/connection'
  },
  {
    path: '/connection',
    name: 'Connection',
    component: ConnectionForm
  },
  {
    path: '/',
    component: MainLayout,
    children: [
      {
        path: 'calls',
        name: 'Calls',
        component: CallsPage
      },
      {
        path: 'contacts',
        name: 'Contacts',
        component: ContactsPage
      },
      {
        path: 'contacts/new',
        name: 'NewContact',
        component: NewContactPage
      },
      {
        path: 'new-call',
        name: 'NewCall',
        component: NewCallPage
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
